<template>
  <div class="box">
    <div class="content">
      <div class="content__top">
        <div class="content__top__left" @click="imgheader">
          <img :src="userinfo.usericon" alt="" class="top__left__img" />
          <div class="mianming">
            <div>{{ userNameInfo }}</div>
            <!--<el-button size="mini" type="warning" round v-if="
                userinfo.truename == '' ||
                userinfo.truename == null ||
                userinfo.phone == '' ||
                userinfo.phone == null
              ">完善信息</el-button>-->
          </div>
        </div>
        <div class="content__top__right">
          <div class="top__right__list" @click="toPric">
            <img class="top__right__img" src="../assets/img7.png" alt="" />
            <div>我的奖品</div>
          </div>
          <div class="top__right__list" @click="sign">
            <img class="top__right__img" src="../assets/img2.png" alt="" />
            <div>签到</div>
          </div>
        </div>
      </div>
      <div class="houseber" v-if="noticeList.length == 0">
        <img src="../assets/img4.png" alt="" />
        系统消息 : 感谢您的关注！
      </div>
      <div class="block" v-else>
        <div class="blockimg"><img src="../assets/img4.png" alt="" /></div>
        <!-- <span class="demonstration">默认 Hover 指示器触发</span> -->
        <div class="blockswiper">
          <el-carousel height="20" arrow="never" indicator-position="none">
            <el-carousel-item v-for="item in noticeList" :key="item.id">
              <div class="small houseber one_line" @click="listShow(item)">
                {{ item.title }}
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="content__cdbox">
        <div class="content__cdboxbg">
          <div class="chartletimg">
            <img src="../assets/touming.png" alt="" />
          </div>

          <div class="cdbox__top">
            <div class="cdbox__text">我的积分</div>
            <div class="cdbox__cont">
              <!-- <vns
                :start="0"
                :end="userinfo.nowPoints"
                :times="10"
                :speed="50"
              /> -->
              {{ userinfo.nowPoints }}
            </div>
            <div class="cdbox_right" @click="subsidiary">积分明细</div>
          </div>
          <div class="cdbox__line">
            <div
              v-for="(item, index) in vipLevel"
              :key="index"
              class="cdbox__linebox"
            >
              <div class="cdbox__linebox_list">{{ item.level }}</div>
              <div>{{ item.points }}</div>
            </div>
            <!-- <div class="cdline">
              <div class="cdline__on"></div>
            </div> -->
            <div class="cdline">
              <el-progress
                :percentage="percentage"
                :color="customColor"
              ></el-progress>
            </div>
          </div>
        </div>
      </div>
      <div class="content__box">
        <div
          v-for="(item, index) in contentlist"
          :key="index"
          class="content__list"
          @click="goALLgoods(item.path)"
        >
          <div class="content__left">
            <img class="content__left__img" :src="item.img" alt="" />
            <div class="content__leftfont">
              <div class="content__leftfont_h">{{ item.name_h }}</div>
              <div class="content__leftfont_c">{{ item.name_c }}</div>
            </div>
          </div>
          <div class="content__right">
            <div class="content__right__update" v-if="item.state == 1">
              <div class="d"></div>
              有更新
            </div>
            <img
              class="content__right__img"
              src="../assets/img20.png"
              width="100%"
            />
          </div>
        </div>
      </div>
      <!-- <div style="display: flex; justify-content: flex-end; opacity: 0">
        <el-button @click="removeGetToken">清除token</el-button>
      </div> -->
    </div>
  </div>
</template>

<script>
import { MessageBox, Toast } from "mint-ui";
import {
  getToken,
  setToken,
  removeToken,
  delToken,
  getCode,
} from "@/utils/auth";
import request from "@/utils/request";
import { getUrlCode } from "@/utils/public";
import vns from "vue-number-scroll";
import { Debounce } from "@/utils/public";
export default {
  name: "index",
  inject: ["reload"],
  components: {
    vns,
  },
  data() {
    return {
      noticeList: [],
      animate: false,
      vipLevel: [],
      percentage: 0,
      identity: "",
      userinfo: [],
      customColor: "#F5E560",
      userNameInfo: "",
      contentlist: [],
      cdlist: [
        {
          level: "v1",
          cont: "0",
        },
        {
          level: "v2",
          cont: "500",
        },
        {
          level: "v3",
          cont: "1000",
        },
        {
          level: "v4",
          cont: "1500",
        },
        {
          level: "v5",
          cont: "2000",
        },
      ],
    };
  },
  async created() {
    // console.log(request)
    // 页面显示
    let t = this;
    setInterval(t.showNotice, 3000);
    this.createNum();
    // getCode();
    //查看是否有更新
    await this.getMenu();
    await this.getRedList();
  },
  beforeCreate() {
    console.log("页面进入");
  },
  beforeRouteEnter: (to, from, next) => {
    next((vm) => {
      vm.getRedList();
    });
  },
  async mounted() {
    await this.hint();
    await this.systemMessages();
  },
  methods: {
    getMenu() {
      return request({
        url: "/generator/indlist/front/list",
        method: "get",
      }).then((response) => {
        let single = response.list.rows;
        this.contentlist = [
          {
            img: require("../assets/img5.png"),
            name_h: single[0].title,
            name_c: single[0].content,
            path: "integral",
            state: 0,
          },
          {
            img: require("../assets/img11.png"),
            name_h: single[1].title,
            name_c: single[1].content,
            path: "turntable",
            state: 0,
          },
          {
            img: require("../assets/img13.png"),
            name_h: single[2].title,
            name_c: single[2].content,
            path: "ActivityCenter",
            state: 0,
          },
          {
            img: require("../assets/img9.png"),
            name_h: single[3].title,
            name_c: single[3].content,
            path: "cearchPage",
            state: 0,
          },
          {
            img: require("../assets/img10.png"),
            name_h: single[4].title,
            name_c: single[4].content,
            path: "votelist",
            state: 0,
          },
          {
            img: require("../assets/pingshen.png"),
            name_h: single[5].title,
            name_c: single[5].content,
            path: "onlinerevews",
            state: 0,
          },
          {
            img: require("../assets/dati.png"),
            name_h: single[6].title,
            name_c: single[6].content,
            path: "answerList",
            state: 0,
          },
          {
            img: require("../assets/dianzan.png"),
            name_h: single[7].title,
            name_c: single[7].content,
            path: "ShareGifts",
            state: 0,
          },
        ];
      });
    },
    resetMenu() {
      this.contentlist.forEach((item) => {
        item.state = 0;
      });
    },
    createNum() {
      const port = 2;
      localStorage.setItem("port", port);
    },
    getRedList() {
      this.resetMenu();
      return request({
        url: "/generator/redmod/front/list",
        method: "get",
      }).then((response) => {
        this.redList = response.list;
        response.list.forEach((item, index) => {
          console.log(item, "item");
          switch (item) {
            case "article":
              this.$set(this.contentlist[0], "state", 1);
              break;
            case "draw":
              this.$set(this.contentlist[1], "state", 1);
              break;
            case "activity":
              this.$set(this.contentlist[2], "state", 1);
              break;
            case "question":
              this.$set(this.contentlist[3], "state", 1);
              break;
            case "vote":
              this.$set(this.contentlist[4], "state", 1);
              break;
            case "access":
              this.$set(this.contentlist[5], "state", 1);
              break;
            case "answer":
              this.$set(this.contentlist[6], "state", 1);
              break;
          }
        });
        // alert(JSON.stringify(response.token));
      });
    },
    //暂时没用的方法
    testRequest() {
      console.log(123);
      let query = {
        userId: 7,
      };
      request({
        url: "/integral/generator/user/front/gettoken",
        method: "get",
        params: query,
      }).then((response) => {
        // console.log(response.token);
        alert(JSON.stringify(response.token));
      });
      request({
        url: "/integral/generator/user/front/gettoken",
        method: "post",
        data: query,
      }).then((response) => {
        // console.log(response.token);
        alert(JSON.stringify(response.token));
      });
    },
    showNotice() {
      let t = this;
      t.animate = true;
      setTimeout(() => {
        t.noticeList.push(t.noticeList[0]);
        t.noticeList.shift();
        t.animate = false;
      }, 500);
    },
    systemMessages() {
      console.log(2);
      return request({
        url: "/generator/notification/front/list",
        method: "get",
      }).then((response) => {
        console.log(response.list.rows);
        this.noticeList = response.list.rows;
      });
    },
    registerDay() {
      return request({
        url: "/generator/user/front/register",
        method: "get",
      }).then((response) => {
        console.log("11111", response);
        if (response.status == 0) {
          Toast({
            message: response.message,
            iconClass: "glyphicon glyphicon-ok",
          });
        }
      });
    },
    // levelpoints() {
    //   console.log("3");
    //   return request({
    //     url: "/generator/levelpoints/front/list",
    //     method: "get",
    //   }).then((response) => {
    //     console.log(response.list.rows);
    //     // this.noticeList = response.list.rows;
    //     this.vipLevel = response.list.rows;
    //   });
    // },
    hint() {
      var aa = document.cookie.split("=");
      console.log(aa, "aa");
      Toast({
        message: aa,
      });
      console.log(getToken(), "12121212");
      return request({
        url: "/generator/user/front/getinfo",
        method: "get",
      }).then((response) => {
        console.log(response.user);
        this.userinfo = response.user;
        this.vipLevel = response.list;
        this.identity = response.user.identity;
        this.percentage = response.user.levelNum;
        if (response.user.status == 0) {
          this.imgheader();
        } else {
          if (response.user.truename != null) {
            this.userNameInfo = response.user.truename;
          } else {
            this.userNameInfo = response.user.username;
          }
        }
      });
    },
    imgheader() {
      console.log("头像");
      let row = this.userinfo;
      console.log(row);
      this.$router.push({
        name: "personalInformation",
        query: {
          row: row,
        },
      });
    },
    toPric() {
      console.log("跳转1");
      this.$router.push({
        name: "Prizestatus",
      });
    },
    sign() {
      console.log("签到");
      request({
        url: "/generator/user/front/register",
        method: "get",
      }).then((response) => {
        console.log(response);
        if (response.msg == "success") {
          Toast({
            message: response.message,
            iconClass: "glyphicon glyphicon-ok",
          });
          // this.reload()
          this.hint();
        } else {
          Toast({
            message: response.message,
          });
        }
      });
    },
    listShow(row) {
      console.log(row.id);
      this.$router.push({
        name: "SystemMessages",
        query: {
          row: row.id,
        },
      });
    },
    subsidiary() {
      this.$router.push({
        name: "IntegralRecord",
      });
    },
    format(percentage) {
      console.log(percentage);
      return percentage === 100 ? "满" : `${percentage}%`;
    },

    goALLgoods(row) {
      console.log("ok", row);
      if (row == "integral") {
        this.$router.push({
          name: "integral",
        });
      } else if (row == "turntable") {
        this.$router.push({
          name: "luckDraw",
        });
      } else if (row == "luckDraw") {
        this.$router.push({
          name: "luckDraw",
        });
      } else if (row == "draw") {
        this.$router.push({
          name: "draw",
        });
      } else if (row == "ActivityCenter") {
        this.$router.push({
          name: "ActivityCenter",
        });
      } else if (row == "votelist") {
        this.$router.push({
          name: "votelist",
        });
      } else if (row == "cearchPage") {
        this.$router.push({
          name: "cearchPage",
        });
      } else if (row == "onlinerevews") {
        this.$router.push({
          name: "onlinerevews",
        });
      } else if (row == "ShareGifts") {
        let userId = window.localStorage.getItem("userId");
        this.$router.push({
          name: "ShareGifts",
          query: { shareUserId: userId },
          params: { time: new Date().getTime() },
        });
      } else if (row == "answerList") {
        this.$router.push({
          name: "answerList",
        });
      }
    },
    removeGetToken() {
      // delToken();
      removeToken();
    },
  },
};
</script>

<style lang="less" scoped>
.Top__one {
  position: relative;
  text-align: center;
  height: 48px;
  line-height: 48px;
  background-color: #000;
  color: #fff;
}

.Top__one__left {
  position: absolute;
  width: 0.8rem;
  left: 20px;
  margin-top: 15px;
}

.Top__one__right {
  position: absolute;
  width: 0.8rem;
  right: 20px;
  margin-top: 15px;
}

.content__top {
  // border: 1px solid red;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 10px;
}

.content__top__left {
  // border: 1px solid red;
  display: flex;
  align-items: center;
}

.top__left__img {
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.content__top__right {
  display: flex;
  // color: #b9b9b9;
  align-items: center;
}

.top__right__list {
  width: 60px;
  height: 35px;
  font-size: 13px;
  text-align: center;
}

.top__right__img {
  width: 2rem;
  height: 2rem;
  margin: auto;
  display: block;
}

.content__msg {
  width: 100%;
  height: 29px;
  line-height: 20px;
  padding: 3px 20px 3px 20px;
}

.content__msg__img {
  width: 20px;
  height: auto;
  margin-right: 16px;
}

.content_msg__text {
  line-height: 20px;
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: left;
}

.content__cdbox {
  // border: 1px solid red;
  box-sizing: border-box;
  padding: 10px 0;
  width: 100%;
  height: 155px;
}

.content__cdboxbg {
  position: relative;
  background-color: #fe9911;
  height: 100%;
  height: 100%;
  border-radius: 10px;
  padding-left: 20px;
}

.chartletimg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 125px;
  // height: 50px;
}

.chartletimg img {
  width: 100%;
  height: 100%;
}

.cdbox__top {
  position: relative;
}

.cdbox__text {
  padding-top: 20px;
  color: #fff;
  /* opacity: 80%; */
}

.cdbox__cont {
  font-size: 45px;
  color: #fff;
  /* opacity: 80%; */
  line-height: 50px;
}

.cdbox_right {
  position: absolute;
  right: 20px;
  top: 18px;
  border-radius: 15px;
  height: 30px;
  width: 80px;
  border: 1px solid #fff;
  text-align: center;
  line-height: 28px;
  font-size: 10px;
  color: #fff;
  z-index: 999;
  /* opacity: 80%; */
}

.cdbox__line {
  position: absolute;
  height: 45px;
  width: 100%;
  // background-color: #f6b343;
  bottom: 0;
  left: 0;
  border-radius: 10px;
  display: flex;
  padding: 0 25px;
}

.cdbox__linebox {
  flex: 1;
  color: #fff;
  text-align: center;
}

.cdbox__linebox_list {
  margin-bottom: 4px;
}

.cdline {
  position: absolute;
  /* background-color: #fff; */
  height: 7px;
  width: 90%;
  top: 15px;
  left: 45px;
  /* border-radius: 6px;
  border: 1px solid #b9b9b9; */
}

.cdline__on {
  position: absolute;
  /* background-color: #fff; */
  /* height: 7px; */
  width: 92%;
  top: 13px;
  left: 26px;
}

.content__list {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 66px;
  padding: 10px 20px 5px 30px;
  border-bottom: 1px solid #f6f6f6;
}

.content__left {
  align-items: center;
  display: flex;
}

.content__left__img {
  width: 2.5rem;
  height: 2.5rem;
  padding: 5px;
  margin-right: 15px;
  box-sizing: content-box;
}

.content__leftfont_h {
  font-size: 14px;
  font-weight: 500;
}

.content__leftfont_c {
  font-size: 11px;
  color: rgba(174, 174, 174, 100);
}

.content__right {
  display: flex;
  align-items: center;
}

.content__right__img {
  width: 0.8rem;
  height: 15px;
}

.content__right__update {
  color: #b9b9b9;
  // padding-right: 25px;
  display: flex;
  align-items: center;
  margin-right: 8px;
}

.d {
  height: 5px;
  width: 5px;
  background-color: #ff9500;
  border-radius: 5px;
  margin-right: 5px;
  // display: inline-block;
  // line-height: 6px;
}

.noticeContent {
  margin-top: 10px;
  display: block;
  position: relative;
  width: 100%;
  height: 25px;
  overflow: hidden;
  /* border-top: 1px solid #ece6ed;
  border-bottom: 1px solid #ece6ed; */
}

.noticeContent li {
  text-align: left;
  line-height: 25px;
  height: 35px;
  font-size: 12px;
  color: black;
}

.notice_list {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.notice_top {
  transition: all 0.5s;
  margin-top: -30px;
}

.imgKKKK {
  display: flex;
  align-items: center;
}

.imgKKKK img {
  width: 20px;
  height: 20px;
  margin: 0 10px;
}

/deep/.el-progress__text {
  display: none;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.houseber {
  /* border: 1px solid red; */
  padding: 5px 12px;
}

.houseber img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

/deep/.el-button--mini,
.el-button--mini.is-round {
  padding: 5px 10px;
}

.mianming {
  display: flex;
  align-items: center;

  div {
    padding-right: 10px;
  }
}

.block {
  display: flex;
  // justify-content: space-between;
  align-items: center;
  padding: 5px 12px;
}

.blockimg {
  width: 20px;
  height: 20px;

  // border: 1px solid red;
  img {
    width: 100%;
    height: 100%;
  }
}

.blockswiper {
  // border: 1px solid red;
  width: 100%;
  height: 20px;

  /deep/.el-carousel__container {
    height: 30px;
  }
}
</style>
